<script setup>
import { fetch24HoutData } from '../api/weatherAPI'
import { initBasicBar } from '../util/echarts'
import { ref, watch } from 'vue'
// 引入dayjs日期库
import dayjs from 'dayjs'
const hour24 = ref([]) //表示此数据是空数组
const hour24FxTime = ref([])
const hour24Temp = ref([])
const updateTime = ref('')
const chartDom = ref(null)
import { useCityStore } from '../stores/cityStore'
const cityStore = useCityStore()
watch(
  () => cityStore.location,
  () => {
    getDate(cityStore.location.id)
  },
  { immediate: true }
)
// 调用函数
// getDate(cityStore.location.id)
async function getDate(locationID) {
  const res = await fetch24HoutData(locationID)
  // console.log(res)
  updateTime.value = dayjs(res.updateTime).format('YYYY年MM月DD日 HH时mm分')
  hour24.value = res.hourly
  hour24FxTime.value = []
  hour24Temp.value = []
  hour24.value.forEach((element) => {
    hour24FxTime.value.push(element.fxTime)
    hour24Temp.value.push(element.temp)
  })
  initBasicBar(
    chartDom.value,
    hour24FxTime.value.map((element) => dayjs(element).format('HH')),
    hour24Temp.value
  )
}
</script>
<template>
  <div class="top">
    <p>未来24小时天气预报</p>
    <p>最后更新时间:{{ updateTime }}</p>
  </div>
  <div id="main" ref="chartDom"></div>
</template>
<style scoped>
.top > p:nth-of-type(1) {
  font-size: 3rem;
}
.top > p:nth-of-type(2) {
  font-size: 2rem;
}
#main {
  width: 100%;
  height: 400px;
}
</style>